<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { queryStockUpList } from '@/api/stockApi'

// 列表数据
const data = ref([]);

// 时间选择器数据
const dateValue = ref('')

/**
 * 获取当前日期
 */
const currentDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
  const day = String(today.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
};

onMounted(async () => {
  // 查询涨停列表
  const date = await currentDate()
  const res = await queryStockUpList(date);
  console.log('res', res);
  data.value = res.data;
})

/**
 * 时间选择器事件
 */
const dateDoChange = async () => {
  console.log('日期选择器');
  const currentDate = dateValue.value;
  console.log('currentDate', currentDate);

  // 查询涨停列表
  const res = await queryStockUpList(currentDate);
  console.log('res', res);
  data.value = res.data;
}
</script>

<template>
  <div class="picker-class">
    <div class="block">
      <el-date-picker value-format="YYYYMMDD" v-model="dateValue" type="date" placeholder="选择时间"
        @change="dateDoChange" />
    </div>
  </div>
  <div class="stock-up-list-class">
    <el-table :data="data" height="580" style="width: 100%">
      <el-table-column prop="index" type="index" index="number" label="序号" width="50" />
      <el-table-column prop="code" label="股票代码" width="150" />
      <el-table-column prop="name" label="股票名称" width="150" />
      <el-table-column prop="upOrDownTime" label="涨停时间" width="150" />
      <el-table-column prop="newPrice" label="最新价格" width="150" />
      <el-table-column prop="upDownScope" label="股票名称" width="150" />
      <el-table-column prop="tradingLimit" label="成交额" width="150" />
      <el-table-column prop="shockScope" label="振幅" width="150" />
      <el-table-column prop="changeHandsRate" label="换手率" width="80" />
    </el-table>
  </div>

</template>

<style scoped>
.stock-up-list-class {
  margin-top: 20px;
}

.picker-class {
  margin-top: 20px;
}
</style>
